<template xmlns="http://www.w3.org/1999/html">
    <div class="app-container">
        <!-- 左边 -->
        <div class="left">
            <div class="put">
                <el-input placeholder="请输入机器人名称" v-model="robot_name" @change="getRobotName($event)"
                    prefix-icon="el-icon-search" clearable></el-input>
            </div>
            <div class="table">
                <el-table :data="robotList" @row-click="handleSelectionChange" height="100%"
                    :class="[isDologin ? 'scrollbarShow' : 'commonScrollbarTable']"
                    :header-cell-style="{ width: '100%', background: '#0d1f4e', color: '#bdbdc2', fontSize: '12px', 'text-align': 'left' }"
                    :row-style="{ height: '40px', width: '100%', fontSize: '12px', color: '#bdbdc2', 'text-align': 'left' }"
                    :cell-style="{ padding: '0px', width: '100%', 'text-align': 'left' }">
                    <el-table-column prop="robot_num" label="编号" width="90px" />
                    <el-table-column prop="robot_name" label="名称" width="90px" />
                    <el-table-column prop="robot_state" label="状态" width="70px">
                        <template slot-scope="scope">
                            <i class="el-icon-error" v-if="scope.row.robot_state === 0"
                                style="font-size: 20px; background-color:#fff; color: #a3a3a3; border-radius: 14px;"></i>
                            <i class="el-icon-success" v-if="scope.row.robot_state === 1"
                                style="font-size: 20px; background-color:#fff; color:#24d141; border-radius: 14px;"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>
        <!-- 中间 -->
        <div class="video-center">
            <div>
                <p id="robotitle" style="font-size:18px;color: #e7e7ea;letter-spacing:1px;"></p>
            </div>
            <div class="center-box1">
                <!-- 转速盘 -->
                <div class="Speed-dial">
                    <div id="gauges" ref="gauges"></div>
                </div>
                <div class="right-mode">
                    <div class="right-mode1">
                        <p>模式</p>
                        <p>{{ jqrms }}</p>
                    </div>
                    <div class="right-mode2">
                        <p>方向</p>
                        <p>{{ jqrfx }}</p>
                    </div>
                </div>

                <div style="margin-left:14px;margin-bottom:1%;display: flex;
            justify-content: center;
            align-items: center;">
                    <img style="width:80%;" src="../../components/images/line1.png" alt="">
                </div>

                <div class="Mode-selection">
                    <p>模式选择</p>
                </div>

                <!-- 五个按钮 -->
                <div class="Operation-button" id="#btn">
                    <div class="Operation-buttonBox" @click="jqrmsF('1')">
                        <el-button size="	medium" circle @click="selectedTab = 0"></el-button>
                        <p>手动模式</p>
                    </div>
                    <div class="Operation-buttonBox" @click="jqrmsF('2')">
                        <el-button @click="selectedTab = 1" size="mini" circle style="
                      background: linear-gradient(227deg, #0F947C, #10DAB2);">
                        </el-button>
                        <p>自动模式</p>
                    </div>
                    <div class="Operation-buttonBox" @click="jqrzymsF('3')">
                        <el-button @click="selectedTab = 2" size="mini" circle
                            style="
                                                                              background: linear-gradient(227deg, #337F17, #3CA813);">
                        </el-button>
                        <p>一键返航</p>
                    </div>

                    <div class="Operation-buttonBox" @click="zt()">
                        <el-button size="mini" circle style="
                        background: linear-gradient(227deg, #B72517, #EA392D);">
                        </el-button>
                        <p>暂停</p>
                    </div>
                </div>
            </div>
            <!-- 手动模式 -->
            <div class="center-box2-1" v-if="selectedTab === 0">
                <div class="right-bottomTitle">
                    <p>手动模式</p>
                    <span></span>
                </div>
                <div class="right-bottomBox">
                    <div class="rightbox1">
                        <el-dropdown @command="handleDropdownCommand">
                            <el-button type="primary" size="min" style="width: 80px;
                                                                                                      height: 30px;background: #0F1A43 !important;
                                                                                                      display: flex;
                                                                                                      justify-content: space-around;
                                                                                                      align-items: center;
                                                                                                      border: 2px solid #54619D;
                                                                                                      border-radius: 10px;
                                                                                                      font-size: 12px;
                                                                                                      font-family: Bahnschrift;
                                                                                                      font-weight: 400;
                                                                                                      color: #C1C1C1;">
                                {{ selectedDropdownItem ? selectedDropdownItem.position_dist : '0' }}<i
                                    class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="item in patrolpointList" :key="item.position_dist"
                                    :command="item">{{ item.position_dist }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>点位</span>
                        <el-button class="btn1" @click="mbwzF()" size="default">目标位置</el-button>
                    </div>
                    <div class="rightbox2">
                        <el-dropdown @command="sdmslb">
                            <el-button type="primary" size="min" style="width: 80px;
                                                                                                  height: 30px;background: #0F1A43 !important;
                                                                                                  display: flex;
                                                                                                  justify-content: space-around;
                                                                                                  align-items: center;
                                                                                                  border: 2px solid #54619D;
                                                                                                  border-radius: 10px;
                                                                                                  font-size: 12px;
                                                                                                  font-family: Bahnschrift;
                                                                                                  font-weight: 400;
                                                                                                  color: #C1C1C1;">
                                {{ sdmsd }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="0">0</el-dropdown-item>
                                <el-dropdown-item command="1000">1000</el-dropdown-item>
                                <el-dropdown-item command="2000">2000</el-dropdown-item>
                                <el-dropdown-item command="3000">3000</el-dropdown-item>
                                <el-dropdown-item command="4000">4000</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>r/min</span>
                        <el-button class="btn2" @click="sdmsdF()" size="default">速度设定</el-button>
                    </div>
                </div>
                <div class="rightbox3">
                    <div class="rightbox3-1">
                        <el-button class="btn1" size="default" @click="sdmsqd()">启动</el-button>
                        <el-button class="btn2" size="default" @click="sdmsqj()">前进</el-button>
                        <el-button class="btn3" size="default" @click="sdmsht()">后退</el-button>
                    </div>
                </div>
            </div>

            <!-- 自动模式 -->
            <div class="center-box2-2" v-if="selectedTab === 1">
                <div class="right-bottomTitle">
                    <p>自动模式</p>
                    <span></span>
                </div>
                <div class="right-bottomBox1">
                    <el-dropdown @command="zdmslb">
                        <el-button type="primary" size="min" style="width: 80px;
                                                                                                height: 30px;background: #0F1A43 !important;
                                                                                                display: flex;
                                                                                                justify-content: space-around;
                                                                                                align-items: center;
                                                                                                border: 2px solid #54619D;
                                                                                                border-radius: 10px;
                                                                                                font-size: 12px;
                                                                                                font-family: Bahnschrift;
                                                                                                font-weight: 400;
                                                                                                color: #C1C1C1;">
                            {{ zdmssdzd }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="0">0</el-dropdown-item>
                            <el-dropdown-item command="1000">1000</el-dropdown-item>
                            <el-dropdown-item command="2000">2000</el-dropdown-item>
                            <el-dropdown-item command="3000">3000</el-dropdown-item>
                            <el-dropdown-item command="4000">4000</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>r/min</span>
                    <el-button class="btn" size="default" @click="zdmsdsd()">速度设定</el-button>
                </div>
                <div class="right-bottomBox2">
                    <div class="rightbox2-1">
                        <el-button class="btn1" size="default" @click="zdmsqd()">启动</el-button>
                        <el-button class="btn2" size="default" @click="dd()">定点</el-button>
                        <el-button class="btn3" size="default" @click="lx()">连续</el-button>
                    </div>
                </div>
            </div>

            <!-- 一键返航 -->
            <div class="center-box2-3" v-if="selectedTab === 2">
                <div class="right-bottomTitle">
                    <p>一键返航</p>
                    <span></span>
                </div>
                <div class="right-bottomBox">
                    <el-button class="btn" size="default" @click="yjfh()">返航</el-button>
                </div>
            </div>

        </div>

        <!-- 右边 -->
        <div class="video-right">
            <div>
                <p style="font-size:18px;color: #e7e7ea;letter-spacing:1px;">视频控制</p>
            </div>
            <!-- 海康摄像头 -->
            <div class="videoBox">
                <div class="videobox1">
                    <!-- 监控画面 -->
                    <div class="box">
                        <video v-if="this.online != -1" id="HKvideo" class="video-js" style="width:100%;height:98%" controls
                            autoplay autobuffer muted preload="auto" disablePictureInPicture="true"
                            controlslist="nodownload"></video>
                    </div>
                </div>
                <div class="videobox2">
                    <div class="videobox2-1">
                        <p>音视频控制</p>
                        <span></span>
                    </div>
                    <div class="videobox2-2">
                        <div class="videobox2-2-1">
                            <el-button class="btn" size="mini" @click="HKtiming">摄像头校时</el-button>
                            <p contenteditable="true" id="sy"></p>
                        </div>

                        <div class="videobox2-2-3">
                            <el-button class="btn3" size="default" v-if="this.online != -1">在线</el-button>
                            <el-button class="btn1" size="default" v-else-if="this.online == -1">离线</el-button>
                            <el-button class="btn2" size="default" @click="HKwatermark">摄像头水印</el-button>
                        </div>
                        <div class="videobox2-2-4">
                            <el-button class="btn1" size="mini" @click="HKstartVideo">摄像头开始录</el-button>
                            <el-button class="btn2" size="mini" @click="HKendVideo">摄像头停止录</el-button>
                        </div>
                    </div>
                </div>
                <!-- <img src="../../components/images/line.png" alt=""> -->
                <div class="videobox3">
                    <div class="videobox3-1">
                        <p>云台</p>
                        <span></span>
                    </div>
                    <div class="videobox3-2">
                        <!-- 八角云盘 -->
                        <div class="ptz">
                            <!-- /* 外圆环 */ -->
                            <div id="round"></div>
                            <!-- /* 黑色内圆环 */ -->
                            <div id="center_black"></div>
                            <div id="center_blue" @click="HKpicture">
                                <span>抓图</span>
                            </div>
                            <div id="circle0">
                                <div id="left">
                                    <div class="circle-left" id="circle2" @click="startUp" @mousedown="startUp1"
                                        @mouseup="stopUp1">
                                        <span>上</span>
                                    </div>
                                    <div class="circle-left" id="circle3" @click="startUpRight" @mousedown="startUpRight1"
                                        @mouseup="stopUpRight1">
                                        <span>右上</span>
                                    </div>
                                    <div class="circle-left" id="circle4" @click="startRight" @mousedown="startRight1"
                                        @mouseup="stopRight1">
                                        <span>右</span>
                                    </div>
                                    <div class="circle-left" id="circle5" @click="startDownRight"
                                        @mousedown="startDownRight1" @mouseup="stopDownRight1">
                                        <span>右下</span>
                                    </div>
                                </div>
                                <div id="right">
                                    <div class="circle-right" id="circle9" @click="startUpLeft" @mousedown="startUpLeft1"
                                        @mouseup="stopUpLeft1">
                                        <span>左上</span>
                                    </div>
                                    <div class="circle-right" id="circle8" @click="startLeft" @mousedown="startLeft1"
                                        @mouseup="stopLeft1">
                                        <span>左</span>
                                    </div>
                                    <div class="circle-right" id="circle7" @click="startDownLeft"
                                        @mousedown="startDownLeft1" @mouseup="stopDownLeft1">
                                        <span>左下</span>
                                    </div>
                                    <div class="circle-right" id="circle6" @click="startDown" @mousedown="startDown1"
                                        @mouseup="stopDown1">
                                        <span>下</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 变倍 -->
                        <div class="videobox3-3">
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startBBminus" @mousedown="startBBminus1" @mouseup="stopBBminus1"><i
                                        class="el-icon-minus"></i></p>
                                <p>变倍</p>
                                <p class="btn2" @click="startBBplus" @mousedown="startBBplus1" @mouseup="stopBBplus1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startBJminus" @mousedown="startBJminus1" @mouseup="stopBJminus1"><i
                                        class="el-icon-minus"></i></p>
                                <p>变焦</p>
                                <p class="btn2" @click="startBJplus" @mousedown="startBJplus1" @mouseup="stopBJplus1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                            <div class="videobox3-3-1">
                                <p class="btn1" @click="startGQminus" @mousedown="startGQminus1" @mouseup="stopGQminus1"><i
                                        class="el-icon-minus"></i></p>
                                <p>光圈</p>
                                <p class="btn2" @click="startGQplus" @mousedown="startGQplus1" @mouseup="stopGQplus1"><i
                                        class="el-icon-plus"></i></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import * as echarts from "echarts";
import $ from "jquery";
import {
    ddspCmd,
    htCmd,
    jqrdataCmd,
    jqrsdCmd,
    lxspCmd,
    mbwzCmd,
    msszCmd,
    qjCmd,
    robotrunCmd,
    robotstopCmd,
    xjsdCmd,
    yjfhCmd,
    zdqdCmd,
    zymsmsszCmd, listonPageRobotConfig
} from "@/api/nssc/robotcontrol/robotcontrol";
import {
    HKendVideo,
    HKfocusAdd,
    HKfocusAdd1,
    HKfocusAddEnd1,
    HKfocusDec,
    HKfocusDec1,
    HKfocusDecEnd1,
    HKirisAdd,
    HKirisAdd1,
    HKirisAddEnd1,
    HKirisDec,
    HKirisDec1,
    HKirisDecEnd1,
    HKonline,
    HKpicture,
    HKptzDown,
    HKptzDown1,
    HKptzDownEnd1,
    HKptzLeft,
    HKptzLeft1,
    HKptzLeftDown,
    HKptzLeftDown1,
    HKptzLeftDownEnd1,
    HKptzLeftEnd1,
    HKptzLeftUp,
    HKptzLeftUp1,
    HKptzLeftUpEnd1,
    HKptzRight,
    HKptzRight1,
    HKptzRightDown,
    HKptzRightDown1,
    HKptzRightDownEnd1,
    HKptzRightEnd1,
    HKptzRightUp,
    HKptzRightUp1,
    HKptzRightUpEnd1,
    HKptzUp,
    HKptzUp1,
    HKptzUpEnd1,
    HKstartVideo,
    HKtiming,
    HKwatermark,
    HKzoomAdd,
    HKzoomAdd1,
    HKzoomAddEnd1,
    HKzoomDec,
    HKzoomDec1,
    HKzoomDecEnd1
} from "@/api/nssc/hkvideo/video";
import {
    listPatrolPoint,
} from "@/api/nssc/patrolpoint/patrolpoint";
import { ippingCmd } from "@/api/nssc/home/home";
export default {
    data() {
        return {
            //点位列表
            patrolpointList: [],
            selectedDropdownItem: '',
            //机器人列表
            robotList: [],
            //控制机器人的滚动条
            isDologin: false,
            robot_name: undefined,//机器人名称
            zdmssdzd: 1000,//自动模式速度设定
            sdmsd: '1000', //手动模式机器人速度
            jqrfx: '无', //机器人方向
            jqrms: '无',//机器人模式
            //机器人数据
            robot: {},
            //控制模式板块的切换(表示默认显示第一个内容)
            selectedTab: 0,
            //时间戳
            mousedownTime: 0,
            mouseupTime: 0,
            //摄像头服务
            webRtcServer: null,
            queryParams:{
                robot_name: undefined //机器人名称
            },
            queryParams1:{
                robot_config_id: undefined
            },
            queryparms2:{
                robotid: undefined,
            },// 查询参数
            queryparms3: {
                robotid: undefined,
                valu: undefined,
                robot_ip: undefined,
                robot_port: undefined,
                video_ip1: undefined,
                video_name1: undefined,
                video_pwd1: undefined,
                video_port1: undefined,
                residence_time: undefined,
            }, // 摄像头参数
            queryparms4: {
                valu: undefined,
                video_ip1: localStorage.getItem("video_ip1"),
                video_name1: localStorage.getItem("video_name1"),
                video_pwd1: localStorage.getItem("video_pwd1"),
                video_port1: localStorage.getItem("video_port1"),
                residence_time: undefined,
                robot_config_id: localStorage.getItem("robot_config_id"),
            },//在线或离线
            online: '',
            timer: null,//定时器
        }
    },
    created() {
        this.getList();//机器人列表
    },
    // mounted() {
    //     //机器人标题
    //     $("#robotitle").text(localStorage.getItem("robot_name") == null ? "机器人"
    //         : localStorage.getItem("robot_name"));
    //     //初始化页面加载方法
    //     this.getList();//机器人列表
    // },
    mounted() {
         //机器人标题
         $("#robotitle").text(localStorage.getItem("robot_name") == null ? "机器人" : localStorage.getItem("robot_name"));
        this.echarts1(0);//电机转速
        this.timer = setInterval(() => {
            this.getList()
            this.readata();//机器人数据
        }, 1000);//1秒
        this.spbf(); //挂在完成后播放当前的监控视频 摄像头播放
     /*   this.HKonlines(); //摄像头在线离线状态*/
        this.pointList();//点位列表
    },
    methods: {
      //根据输入框机器人名称，查询机器人列表
       getRobotName(robot_name) {
         this.queryParams.robot_name = robot_name;
         this.getList();
       },
        //点位下拉
        handleDropdownCommand(item) {
            this.selectedDropdownItem = item;
        },
        //摄像头视频播放
        spbf() {
            if (localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != "") {
                //检测摄像头ip通不通
                ippingCmd(localStorage.getItem("video_ip1")).then(response => {
                    if (typeof (response) != null && response.data != null && response.data == true) {
                        this.webRtcServer = new WebRtcStreamer('HKvideo', location.protocol + '//127.0.0.1:8000')
                        //this.webRtcServer.connect('rtsp://admin:nssc1234@192.168.1.64:554/h264/ch1/main/av_stream')
                        this.webRtcServer.connect('rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch1/main/av_stream')
                    }
                });
            }
        },
        //获取当前机器人数据
        handleSelectionChange(row) {
            localStorage.removeItem("robot_config_id");//删除机器人id
            localStorage.removeItem("robot_name");//删除机器人名称
            localStorage.removeItem("video_ip1");//删除1摄像头ip
            localStorage.removeItem("video_port1");//删除1摄像头端口
            localStorage.removeItem("video_name1");//删除1摄像头账号
            localStorage.removeItem("video_pwd1");//删除1摄像头密码
            localStorage.removeItem("robotype");//删除机器人类型
            localStorage.removeItem("camera_type");//删除摄像头类型
            localStorage.setItem("video_ip1", row.video_ip1);//存储值
            localStorage.setItem("video_port1", row.video_port1);//存储值
            localStorage.setItem("video_name1", row.video_name1);//存储值
            localStorage.setItem("video_pwd1", row.video_pwd1);//存储值
            localStorage.setItem("robot_name", row.robot_name);//存储值
            localStorage.setItem("robot_config_id", row.id);//存储值
            localStorage.setItem("robotype", row.robot_type);//存储值
            localStorage.setItem("camera_type", row.camera_type);//存储摄像头类型
            //摄像头参数
            this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
            this.queryparms4.video_name1 = localStorage.getItem("video_name1");
            this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
            this.queryparms4.video_port1 = localStorage.getItem("video_port1");
            this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
            //机器人名称标题
            $("#robotitle").text(localStorage.getItem("robot_name"));
            this.spbf();//摄像头视频播放
           /* this.HKonlines(); //摄像头状态*/
            this.pointList();//点位列表
        },
        /** 查询机器人列表 */
        getList() {
            this.loading = true;
            listonPageRobotConfig(this.queryParams).then(response => {
                this.robotList = response.rows;
                this.loading = false;
            });
        },
        //点位查询
        pointList() {
            listPatrolPoint(this.queryparms4).then(response => {
                this.patrolpointList = response.rows;
            });
        },
        //一键返航
        yjfh() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            yjfhCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //连续视频
        lx() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            lxspCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //定点视频
        dd() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            ddspCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //自动模式(启动)
        zdmsqd() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            zdqdCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //自动模式速度设置
        zdmsdsd() {
            this.queryparms3.valu = this.zdmssdzd;
            console.log("自动模式速度设置" + this.zdmssdzd);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                xjsdCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("自动模式速度设置不能为空")
            }
        },
        //自动模式速度设定
        zdmslb(zdmssdzd) {
            this.zdmssdzd = zdmssdzd;
        },
        //手动模式后退
        sdmsht() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            htCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //手动模式前进
        sdmsqj() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            qjCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //手动模式(启动)
        sdmsqd() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            robotrunCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //手动模式速度设置
        sdmsdF() {
            this.queryparms3.valu = this.sdmsd;
            console.log("手动模式速度设置" + this.sdmsd);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                jqrsdCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("手动模式速度设置不能为空")
            }
        },
        sdmslb(sdmsd) {
            this.sdmsd = sdmsd; // 手动模式速度列表
        },
        //手动模式目标位置
        mbwzF() {
            this.queryparms3.valu = $("#mbwzid").text();
            console.log("目标位置" + this.queryparms3.valu);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                mbwzCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("目标位置不能为空")
            }
        },
        //机器人暂停
        zt() {
            this.queryparms3.robotid = localStorage.getItem("robot_config_id");
            robotstopCmd(this.queryparms3).then(response => {
                if (typeof (response) != null) this.$modal.msg(response.msg);
            });
        },
        //机器人自由模式设置
        jqrzymsF(jqrms) {
            this.queryparms3.valu = jqrms
            console.log("机器人模式设置" + this.queryparms3.valu);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                zymsmsszCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("机器人模式设置不能为空")
            }
        },
        //机器人模式设置
        jqrmsF(jqrms) {
            this.queryparms3.valu = jqrms
            console.log("机器人模式设置" + this.queryparms3.valu);
            if (this.queryparms3.valu != "") {
                this.queryparms3.robotid = localStorage.getItem("robot_config_id");
                msszCmd(this.queryparms3).then(response => {
                    if (typeof (response) != null) this.$modal.msg(response.msg);
                });
            } else {
                this.$modal.msgError("机器人模式设置不能为空")
            }
        },
        //当前机器人数据
        readata() {
            this.queryparms2.robotid = localStorage.getItem("robot_config_id");
            jqrdataCmd(this.queryparms2).then(response => {
                if (typeof response.data != "undefined" && response.data != null) {
                    this.jqrms = response.data.jqrms; //机器人模式
                    this.jqrfx = response.data.jqrfx; //机器人方向
                    this.echarts1(response.data.djzs);//电机转速
                } else {
                    this.jqrms = "无"; //机器人模式
                    this.jqrfx = "无"; //机器人方向
                    this.echarts1(0);//电机转速
                }
            });
        },
        //电机转速
        echarts1(djzs) {
            setTimeout(() => {
                let myCharts = echarts.init(document.getElementById("gauges"));
                myCharts.setOption(
                    {
                        series: [
                            {
                                radius: "100%",
                                center: ['52%', '55%'],
                                type: 'gauge',
                                axisLine: {
                                    lineStyle: {
                                        width: 21,
                                        color: [
                                            [0.3, '#3e78f5'],
                                            [0.7, '#9a54eb'],
                                            [1, '#f37886']
                                        ]
                                    }
                                },
                                pointer: {
                                    width: 6,
                                    itemStyle: {
                                        color: '#3e78f5'
                                    }
                                },
                                axisTick: {
                                    distance: -20,
                                    length: 16,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 1
                                    }
                                },
                                splitLine: {
                                    distance: -20,
                                    length: 20,
                                    lineStyle: {
                                        color: '#fff',
                                        width: 2
                                    }
                                },
                                axisLabel: {
                                    color: '#fff',
                                    distance: 9,
                                    fontSize: 10
                                },
                                detail: {
                                    // width:60,
                                    // height:60,
                                    fontSize: 12,
                                    valueAnimation: true,
                                    formatter: '{value} r/min',
                                    color: '#fff'
                                },
                                data: [
                                    {
                                        value: djzs,
                                        name: '电机转速',
                                    }
                                ],
                                title: {
                                    show: true,
                                    fontSize: 12,
                                    offsetCenter: ["0", "10%"],
                                    color: '#fff'
                                },
                                max: 5000,
                                min: 0
                            }
                        ]
                    }
                );
                window.addEventListener("resize", () => {
                    myCharts.resize();
                })
            }, 1);
        },

        //摄像头在线或离线状态
        HKonlines() {
            if (localStorage.getItem("video_ip1") != null
                && localStorage.getItem("video_ip1") != ""
                && localStorage.getItem("video_name1") != null
                && localStorage.getItem("video_name1") != ""
                && localStorage.getItem("video_pwd1") != null
                && localStorage.getItem("video_pwd1") != ""
                && localStorage.getItem("video_port1") != null
                && localStorage.getItem("video_port1") != ""
            ) {
                this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
                HKonline(this.queryparms4).then(response => {
                    this.online = response.data[0].hKloginValue
                });
            } else {
                this.$modal.msg("海康摄像头账号为空")
            }
        },

        /////////////////////海康摄像头//////////////////
        //校时
        HKtiming() {
            HKtiming(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
                //console.log("88888",queryparms1)
            });
        },
        //水印
        HKwatermark() {
            this.queryparms4.valu = $("#sy").text()
            const value = this.queryparms4.valu
            if (value === '') {
                this.$modal.msg('摄像头水印不能为空')
            } else {
                HKwatermark(this.queryparms4).then(response => {
                    if (typeof (response) != null) {
                        this.$modal.msg(response.msg);
                    }
                });
            }
        },
        //手动录像开始
        HKstartVideo() {
            HKstartVideo(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },

        //手动录像停止
        HKendVideo() {
            HKendVideo().then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //拍照
        HKpicture() {
            HKpicture(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    this.$modal.msg(response.msg);
                }
            });
        },
        //云台向上点击
        startUp: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向上----长按
        startUp1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzUp1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                    //console.log("88888", queryparms1)
                });
            }, 500)
        },
        stopUp1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzUpEnd1(this.queryparms4).then(response => {

            });
        },

        //云台向下点击
        startDown: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向下----长按
        startDown1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzDown1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopDown1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzDownEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向左点击
        startLeft: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzLeft(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向左----长按
        startLeft1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzLeft1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopLeft1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzLeftEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向右点击
        startRight: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzRight(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向右----长按
        startRight1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzRight1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopRight1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzRightEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向左上点击
        startUpLeft: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzLeftUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向左上----长按
        startUpLeft1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzLeftUp1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopUpLeft1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzLeftUpEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向右上点击
        startUpRight: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzRightUp(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向右上----长按
        startUpRight1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzRightUp1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopUpRight1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzRightUpEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向左下点击
        startDownLeft: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzLeftDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向左下----长按
        startDownLeft1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzLeftDown1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopDownLeft1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzLeftDownEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台向右下点击
        startDownRight: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKptzRightDown(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台向右下----长按
        startDownRight1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKptzRightDown1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopDownRight1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKptzRightDownEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变倍+点击
        startBBplus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKzoomAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台变倍+  --  长按
        startBBplus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKzoomAdd1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBBplus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKzoomAddEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变倍-点击
        startBBminus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKzoomDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台变倍-  --  长按
        startBBminus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKzoomDec1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBBminus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKzoomDecEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变焦+点击
        startBJplus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKfocusAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台变焦+  --  长按
        startBJplus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKfocusAdd1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBJplus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKfocusAddEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台变焦-点击
        startBJminus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKfocusDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台变焦-  --  长按
        startBJminus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKfocusDec1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopBJminus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKfocusDecEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台光圈+ 点击
        startGQplus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKirisAdd(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台光圈+ --  长按
        startGQplus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKirisAdd1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopGQplus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKirisAddEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
        //云台光圈- 点击
        startGQminus: _.throttle(function (event) {
            if (this.mousupTime - this.mousdownTime < 1050) {
                HKirisDec(this.queryparms4).then(response => {
                    if (response.msg != null) {
                        this.$modal.msg(response.msg);
                    } else {

                    }
                });
            }

        }, 1000),
        //云台光圈- --  长按
        startGQminus1() {
            this.mousdownTime = new Date().getTime()
            this.timer = setInterval(() => {
                HKirisDec1(this.queryparms4).then(response => {
                    // if (typeof (response) != null) {
                    //   this.$modal.msg(response.msg);
                    // }
                });
            }, 500)
        },
        stopGQminus1() {
            this.mousupTime = new Date().getTime()
            clearInterval(this.timer)
            HKirisDecEnd1(this.queryparms4).then(response => {
                if (typeof (response) != null) {
                    // this.$modal.msg(response.msg);
                }
            });
        },
    },
    beforeDestroy() {
        //清除定时器
        if (this.timer) {
            clearInterval(this.timer); //关闭
        }
        if (this.webRtcServer != null) {
            this.webRtcServer.disconnect();
            this.webRtcServer = null
        }
    },
    enter() {
        this.isDologin = true;
    },
    leave() {
        this.isDologin = false;
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    width: 100%;
    height: calc(100vh - 40px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #011137 !important;
    //padding-left:0;
}

* {
    margin: 0;
    padding: 0;
}

.el-button+.el-button {
    margin-left: 0px;
}

//左边
.left {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;

    // justify-content: space-between;
    .put {
        width: 98%;
        margin: 10px;

        ::v-deep .el-input {
            width: 100%;
            height: 20px;
        }

        ::v-deep .el-input__inner {
            border: 2px solid #0264bf;
            background-color: #081a46;
            // margin: 10px;
        }
    }

    .table {
        width: 98%;
        height: 200px;
        margin: 10px;
        // margin-top: 20px;
        overflow: auto;

        ::v-deep .el-table__body-wrapper {
            &::-webkit-scrollbar {
                // 整个滚动条
                width: 0px; // 纵向滚动条的宽度
                background: rgba(71, 103, 182, 0.3);
                border: none;
            }

            &::-webkit-scrollbar-track {
                // 滚动条轨道
                border: none;
            }
        }

        .el-table {
            width: 100%;

        }

        ::v-deep .el-table th.gutter {
            display: none;
            width: 0
        }

        ::v-deep .el-table colgroup col[name='gutter'] {
            display: none;
            width: 0;
        }

        // ::deep .el-table::before {
        //     height: 0px;
        // }

        ::v-deep .el-table__body {
            width: 100%;
            // padding-left: 10px;
        }

        ::v-deep .el-table__body-wrapper {
            width: 100%;
            background-color: #081a46;
        }

        /*滚动条的宽度*/
        .commonScrollbarTable ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .scrollbarShow ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: block;
            width: 0;
        }

        ::v-deep .el-table tr {
            background-color: transparent;
            border: none;
            // height: 50px;
            width: 100%;
            background-color: #081a46;
        }

        ::v-deep .el-table td {
            background-color: trannt;
            border: none;
            width: 100%;
            // height: 50px;
            background-color: #081a46;
        }

        // /* 表格内背景颜色 */
        ::v-deep .el-table th {
            background-color: transparent;
            border: none;
            width: 100%;
        }

        // 移入变色
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #222448;
        }
    }

    ::v-deep.el-progress-bar__inner {
        background-color: unset; // 将进度条默认的颜色给去除掉，若不生效就再加个!important
    }

    .table::-webkit-scrollbar {
        display: none;
        /*隐藏滚动条*/
    }
}

//中间
.video-center {
    width: 35%;
    height: 100%;
    margin-left: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #011137 !important;

    .center-box1 {
        width: 98%;
        height: 60%;
        background: #011137 !important;
        border: 1px solid #27306b;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .Speed-dial {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            >div {
                width: 98%;
                height: 100%;
                margin-top: 20px;
                //background-color: #00FF00;
            }
        }

        .right-mode {
            width: 60%;
            height: 10%;
            // margin-top: 2%;
            //background-color: #2ec7a1;
            // margin-bottom: -4%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .right-mode1 {
                width: 45%;
                height: 100%;
                //background-color: burlywood;
                display: flex;
                justify-content: center;
                align-items: center;

                :nth-child(1) {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 4px;
                }

                :nth-child(2) {
                    width: 60px;
                    height: 25px;
                    background: #011137 !important;
                    border: 2px solid #54619D;
                    border-radius: 10px;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .right-mode2 {
                width: 45%;
                height: 100%;
                //background-color: burlywood;
                display: flex;
                justify-content: center;
                align-items: center;

                :nth-child(1) {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 4px;
                }

                :nth-child(2) {
                    width: 60px;
                    height: 25px;
                    background: #011137 !important;
                    border: 2px solid #54619D;
                    border-radius: 10px;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .Mode-selection {
            width: 98%;
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 40px;

            p {
                width: 96px;
                height: 24px;
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }
        }

        .Operation-button {
            width: 80%;
            height: 18%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 7px;
            // margin-bottom: 1%;

            .Operation-buttonBox {
                width: 60px;
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                :nth-child(1) {
                    width: 30px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(68deg, #3040F4, #3F79F4);
                    margin-bottom: 5px;
                    border-width: 0px
                }

                :nth-child(2) {
                    width: 60px;
                    height: 16px;
                    text-align: center;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                }
            }
        }
    }

    //手动模式
    .center-box2-1 {
        width: 98%;
        height: 40%;
        background: #011137 !important;
        border: 1px solid #27306b;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .right-bottomTitle {
            width: 98%;
            height: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // background-color: #00FF00;

            >p {
                width: 95px;
                height: 22px;
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-left: 40px;
            }

            span {
                display: block;
                width: 50px;
                height: 2px;
                margin-left: 0.5%;
                background: #4691FF;
            }
        }

        .right-bottomBox {
            width: 98%;
            height: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            // background-color: #2ec7a1;

            .rightbox1 {
                width: 100%;
                height: 50%;
                //background-color: coral;
                display: flex;
                justify-content: center;
                align-items: center;

                >span {
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                    margin-left: 5px;
                }

                .btn1 {
                    width: 80px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #1B2D67);
                    border: 2px solid #2B5B9B;
                    border-radius: 4px;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    // margin-bottom: 10px;
                    margin-left: 30px;
                }
            }

            .rightbox2 {
                width: 100%;
                height: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                //background-color: #9B6D2B;

                >span {
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                    margin-left: 2px;
                }

                .btn2 {
                    width: 80px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #1B2D67);
                    border: 2px solid #2B5B9B;
                    border-radius: 4px;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDEDED;
                    margin-left: 28px;
                }
            }

        }

        .rightbox3 {
            width: 98%;
            height: 25%;
            display: flex;
            align-items: center;
            justify-content: center;

            //background-color: darkkhaki;
            .rightbox3-1 {
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                //background-color: #2ec7a1;
                .btn1 {
                    width: 50px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #1B2D67);
                    border: 2px solid #2B5B9B;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }

                .btn2 {
                    width: 50px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #065D70);
                    border: 2px solid #108B8F;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                    margin-left: 34px;
                    margin-right: 34px;
                }

                .btn3 {
                    width: 50px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #4C0820, #0D1538);
                    border: 2px solid #942028;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }
            }

        }
    }

    //自动模式
    .center-box2-2 {
        width: 98%;
        height: 40%;
        background: #011137 !important;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        //justify-content: center;
        align-items: center;

        .right-bottomTitle {
            width: 98%;
            height: 20%;
            margin-top: 1%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: #00FF00;

            >p {
                width: 95px;
                height: 22px;
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
                margin-left: 42px;
            }

            span {
                display: block;
                width: 50px;
                height: 2px;
                margin-left: 1.5%;
                background: #4691FF;
            }
        }

        .right-bottomBox1 {
            width: 98%;
            height: 20%;
            //background-color: #108B8F;
            display: flex;
            align-items: center;
            justify-content: center;

            >span {
                margin-left: 4px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;
            }

            .btn {
                width: 80px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(0deg, #0D1538, #1B2D67);
                border: 2px solid #2B5B9B;
                border-radius: 4px;
                font-size: 12px;
                font-family: Bahnschrift;
                font-weight: 400;
                color: #C1C1C1;
                margin-left: 20px;
            }
        }

        .right-bottomBox2 {
            width: 98%;
            height: 20%;
            //background-color: #2B5B9B;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;

            .rightbox2-1 {
                width: 50%;
                height: 100%;
                display: flex;
                align-items: flex-end;
                justify-content: center;

                //background-color: blueviolet;
                .btn1 {
                    width: 50px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #1B2D67);
                    border: 2px solid #2B5B9B;
                    border-radius: 4px;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }

                .btn2 {
                    width: 50px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #065D70);
                    border: 2px solid #108B8F;
                    border-radius: 4px;
                    font-size: 12px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                    margin-left: 32px;
                    margin-right: 32px;
                }

                .btn3 {
                    width: 50px;
                    height: 25px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(0deg, #0D1538, #337F17);
                    border: 2px solid #3CA813;
                    border-radius: 4px;
                    font-size: 12px;
                    //margin-left: 8px;
                    font-family: Bahnschrift;
                    font-weight: 400;
                    color: #C1C1C1;
                }
            }

        }
    }

    //一键返航
    .center-box2-3 {
        width: 98%;
        height: 40%;
        background: #011137 !important;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .right-bottomTitle {
            width: 98%;
            height: 20%;
            margin-top: 1%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: #00FF00;

            >p {
                width: 95px;
                height: 22px;
                font-size: 15px;
                margin-left: 30px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #EDEDED;

            }

            span {
                display: block;
                width: 50px;
                height: 2px;
                //margin-left: 0.5%;
                background: #4691FF;
            }
        }

        .right-bottomBox {
            width: 50%;
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: flex-end;

            //background-color: #0264bf;
            .btn {
                width: 50px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: linear-gradient(0deg, #0D1538, #1B2D67);
                border: 2px solid #2B5B9B;
                border-radius: 4px;
                font-size: 12px;
                //margin-left: -5px;
                font-family: Bahnschrift;
                font-weight: 400;
                color: #C1C1C1;
            }
        }
    }

}


//右边
.video-right {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .right-header {
        width: 98%;
        height: 65px;
        margin-bottom: 8px;
        border: 1px solid #2A2E4A;
        border-top: none;
        border-radius: 0px 0px 4px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #081a46;

        p {
            width: 148px;
            height: 25px;
            line-height: 25px;
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #E9E9E9;
        }
    }

    .videoBox {
        width: 98%;
        height: 95.5%;
        display: flex;
        flex-direction: column;
        //justify-content: center;
        align-items: center;
        border: 1px solid #27306b;
        border-radius: 4px;
        background: #011137 !important;

        .videobox1 {
            width: 99.9%;
            height: 52%;
            //display: flex;
            margin-bottom: 0.5%;

            .box {
                width: 100%;
                height: 100% !important;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #000000;
                border: 1px solid #00FF00;
                background-image: url(../../components/images/jiankong.png);
                background-repeat: no-repeat;
                background-position: center center;
            }

            .video-js {
                background-color: rgb(1 5 43);
                object-fit: fill;
                //隐藏video播放按钮
            }

            video {
                pointer-events: none;
            }

            //隐藏video播放按钮
            video::-webkit-media-controls-play-button {
                display: none !important;
            }

            //隐藏video音量进度条
            video::-webkit-media-controls-volume-slider {
                display: none !important;
            }

            //隐藏video音量按钮
            video::-webkit-media-controls-mute-button {
                display: none !important;
            }

            video::-webkit-media-controls-toggle-closed-captions-button {
                display: none !important;
            }

            //隐藏当前时间
            video::-webkit-media-controls-current-time-display {
                display: none !important;
            }

            //隐藏剩余时间
            video::-webkit-media-controls-time-remaining-display {
                display: none !important;
            }

            //隐藏进度条
            video::-webkit-media-controls-timeline {
                display: none !important;
            }

            //更多选项
            video::-internal-media-controls-overflow-button {
                display: none !important;
            }
        }

        .videobox2 {
            width: 99%;
            height: 15%;
            display: flex;
            flex-direction: column;
            align-items: center;
            //margin-bottom: 3%;

            .videobox2-1 {
                width: 98%;
                height: 20%;
                margin-bottom: 2%;

                p {
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #EDEDED;
                    margin-left: 2%;
                }

                span {
                    display: block;
                    margin-left: 3.5%;
                    width: 52px;
                    height: 2px;
                    background: #4691FF;
                }
            }

            .videobox2-2 {
                width: 98%;
                height: 80%;
                margin-bottom: 8px;
                display: flex;
                justify-content: center;

                .videobox2-2-1 {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .btn {
                        width: 90px;
                        height: 25px;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    >P {
                        width: 90px;
                        height: 25px;
                        margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #0F1A43;
                        border: 2px solid #54619D;
                        border-radius: 10px;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #C1C1C1;
                    }
                }

                .videobox2-2-3 {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    //background-color: #00FF00;
                    .btn1 {
                        width: 90px;
                        height: 25px;
                        //margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: linear-gradient(0deg, #4C0820, #0D1538);
                        border: 2px solid #942028;
                        border-radius: 4px;
                        font-size: 8px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        margin-bottom: 5%;
                    }

                    .btn2 {
                        width: 90px;
                        height: 25px;
                        // margin-top: 27%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                    }

                    .btn3 {
                        width: 90px;
                        height: 25px;
                        // margin-top: 27%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                        margin-bottom: 5%;
                    }
                }

                .videobox2-2-4 {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .btn1 {
                        width: 90px;
                        height: 25px;
                        //margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        background: linear-gradient(0deg, #0D1538, #1B2D67);
                        border: 2px solid #2B5B9B;
                        border-radius: 4px;
                    }

                    .btn2 {
                        width: 90px;
                        height: 25px;
                        margin-top: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #EDEDED;
                        background: linear-gradient(0deg, #0D1538, #673B1B);
                        border: 2px solid #9B6D2B;
                        border-radius: 4px;
                    }
                }

            }
        }

        .videobox3 {
            width: 98%;
            height: 32%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 2%;
            //background-color: #00FF00;


            .videobox3-1 {
                width: 98%;
                height: 10%;
                //background-color: #108B8F;

                p {
                    font-size: 16px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #EDEDED;
                    margin-left: 2%;
                }

                span {
                    display: block;
                    margin-left: 2.5%;
                    width: 20px;
                    height: 2px;
                    background: #4691FF;
                }
            }

            .videobox3-2 {
                width: 98%;
                height: 90%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                //margin-top: 1%;
                //background-color: #0051ff;

                .ptz {
                    position: relative;
                    width: 264px;
                    /* padding: 10px; */
                    height: 200px;
                    //background-color: aquamarine;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .circle-left {
                    width: 73px;
                    height: 146px;
                    /* border: 1px solid #fff; */
                    border-radius: 0px 73px 73px 0px;
                    position: absolute;
                    right: 0;
                    transform-origin: 0 50%;
                }

                .circle-right {
                    width: 73px;
                    height: 146px;
                    /* border: 1px solid #fff; */
                    border-radius: 73px 0px 0px 73px;
                    position: absolute;
                    right: 0;
                    transform-origin: 100% 50%;
                }

                /* 八等份分割线 */
                #Canvas {
                    position: absolute;
                    z-index: 1;
                    pointer-events: none;
                    left: 87px;
                    top: 27px;
                    transform: rotate(-22.5deg);
                }

                /* 外圆环 */
                #round {
                    width: 160px;
                    height: 160px;
                    background-color: #011137;
                    border-radius: 50%;
                    position: absolute;
                    left: 80px;
                    top: 20px;
                    z-index: 0;
                }

                /* 黑色内圆环 */
                #center_black {
                    width: 74px;
                    height: 74px;
                    background-color: #011137;
                    border-radius: 50%;
                    position: absolute;
                    left: 123px;
                    top: 63px;
                    z-index: 1;
                }

                /* 中心蓝色圆环 */
                #center_blue {
                    width: 60px;
                    height: 60px;
                    text-align: center;
                    background: linear-gradient(68deg, #3040F4, #3F79F4);
                    border-radius: 50%;
                    position: absolute;
                    left: 130px;
                    top: 70px;
                    z-index: 2;
                }

                #center_blue span {
                    position: absolute;
                    left: 17px;
                    top: 22px;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                /* 圆八等份 */
                #circle0 {
                    width: 146px;
                    height: 146px;
                    border-radius: 73px;
                    top: 0px;
                    background-color: #0f2140;
                    position: absolute;
                    left: 87px;
                    top: 27px;
                    z-index: 0;
                    pointer-events: auto;
                    transform: rotate(-22.5deg);
                }

                #left {
                    /* 用矩形切割半圆 */
                    clip: rect(0px 73px 146px 0px);
                    position: absolute;
                    right: 0px;
                    width: 73px;
                    height: 146px;
                    overflow: hidden;
                    border-left: 2px solid #011137;
                }

                #right {
                    clip: rect(0px 78px 146px 0px);
                    position: absolute;
                    left: 0px;
                    width: 73px;
                    height: 146px;
                    overflow: hidden;
                    //border-right: 2px solid #011137;
                }

                #circle2:hover,
                #circle3:hover,
                #circle4:hover,
                #circle5:hover,
                #circle6:hover,
                #circle7:hover,
                #circle8:hover,
                #circle9:hover,
                #center_blue:hover {
                    cursor: pointer;
                }

                #circle2 {
                    background-color: #0a2056;
                    //border-left: 2px solid #011137;
                }

                #circle2 span {
                    position: absolute;
                    left: 14px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle3 {
                    background-color: #0a2056;
                    transform: rotate(45deg);
                    border-left: 2px solid #011137;
                }

                #circle3 span {
                    position: absolute;
                    left: 10px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle4 {
                    background-color: #0a2056;
                    transform: rotate(90deg);
                    border-left: 2px solid #011137;
                }

                #circle4 span {
                    position: absolute;
                    left: 15px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle5 {
                    background-color: #0a2056;
                    transform: rotate(135deg);
                    border-left: 2px solid #011137;
                }

                #circle5 span {
                    position: absolute;
                    left: 12px;
                    top: 15px;
                    transform: rotate(22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle6 {
                    background-color: #0a2056;
                    transform: rotate(225deg);
                    border-right: 2px solid #011137;
                }

                #circle6 span {
                    position: absolute;
                    right: 14px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle7 {
                    background-color: #0a2056;
                    transform: rotate(270deg);
                    border-right: 2px solid #011137;
                }

                #circle7 span {
                    position: absolute;
                    right: 10px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle8 {
                    background-color: #0a2056;
                    transform: rotate(315deg);
                    border-right: 2px solid #011137;
                }

                #circle8 span {
                    position: absolute;
                    right: 15px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                #circle9 {
                    background-color: #0a2056;
                    transform: rotate(360deg);
                }

                #circle9 span {
                    position: absolute;
                    right: 10px;
                    top: 15px;
                    transform: rotate(-22.5deg);
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ededed;
                }

                .videobox3-3 {
                    width: 30%;
                    height: 80%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 1%;
                    // margin-left: -20%;
                    justify-content: space-around;

                    // background-color: #00FF00;
                    .videobox3-3-1 {
                        width: 90%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        .btn1 {
                            width: 32px;
                            height: 32px;
                            background: linear-gradient(68deg, #3040F4, #3F79F4);
                            border-radius: 50%;
                            border: none;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #EDEDED;
                            cursor: pointer;
                            margin-bottom: 4px;
                        }

                        p {
                            width: 26px;
                            height: 18px;
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #EDEDED;
                            margin-bottom: 4px;
                        }

                        .btn2 {
                            width: 32px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 32px;
                            background: linear-gradient(68deg, #3040F4, #3F79F4);
                            border-radius: 50%;
                            border: none;
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #EDEDED;
                            cursor: pointer;
                            margin-bottom: 4px;
                        }
                    }
                }
            }
        }
    }
}
</style>
